<template>
  <div class="article-container">
    <el-card class="article-card">
      <!-- 顶部搜索栏 -->
      <el-row display="flex" justify="space-between">
        <el-col :span="14" class="fl">
          <el-row>
            <el-col :span="10" class="fl search_left">
              <span class="top_span">关键字</span>
              <el-input v-model="keyword" class="input" />
            </el-col>
            <el-col :span="14">
              <span class="top_span">状态</span>
              <el-select v-model="selectedState" placeholder="请选择">
                <el-option
                  v-for="item in states"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-button size="mini" style="margin-left:10px" @click="clear">清除</el-button>
              <el-button type="primary" size="mini" @click.prevent="search">搜索</el-button>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="2" class="filter-item fr">
          <el-button
            size="small"
            style="margin-left: 10px;"
            type="success"
            icon="el-icon-edit"
            @click="addArticle"
          >新增技巧</el-button>
        </el-col>
      </el-row>

      <!-- 数据总数 数据一共 * 条  -->
      <el-alert :title="alertMsg" type="info" show-icon style="margin:25px 0 15px;font-size:" />

      <!-- 文章列表 -->
      <el-table
        :key="articleForm.state"
        ref="articleForm"
        :data="articleForm"
        :header-cell-style="{'border-bottom':'1px solid #ccc','background-color': 'rgb(252, 249, 249)'}"
      >
        <el-table-column type="index" label="序号" width="90px" />
        <el-table-column label="文章标题" width="460px">
          <template slot-scope="scope">
            <span>{{ scope.row.title }}</span>
            <span v-if="scope.row.videoURL !== ''" class="el-icon-film" style="color:blue" @click="videoPlay(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读人数" width="200px" />
        <el-table-column prop="username" label="录入人" width="200px" />
        <el-table-column prop="createTime" label="录入时间" width="210px" />
        <el-table-column prop="state" label="状态" width="100px" :formatter="formatter" />
        <el-table-column label="操作" width="190px">
          <template slot-scope="scope">
            <el-button type="text" class="scopelink" @click="preview(scope.row.id)">预览</el-button>
            <el-button type="text" class="scopelink" @click="changeState(scope.row)">{{ scope.row.state === 1?'禁用':'启用' }}</el-button>
            <el-button type="text" :disabled="scope.row.state === 1" class="scopelink" @click="changeAritcle(scope.row)">修改</el-button>
            <el-button type="text" :disabled="scope.row.state === 1" class="scopelink" @click="delArticle(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        background
        :current-page="page.page"
        :page-sizes="pagesizes"
        :page-size="page.pagesize"
        layout="prev, pager, next,sizes,jumper"
        :total="total"
        class="fr page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />

      <!-- 视频弹窗 -->
      <el-dialog
        :visible="showVideo"
        title="视频展示"
        @close="showVideo = false"
      >
        <video-player
          ref="videoPlayer"
          class="video-player vjs-custom-skin"
          :playsinline="true"
          :options="playerOptions"
        />
      </el-dialog>

      <!-- 预览文章弹框 -->
      <el-dialog v-if="showArticlePrev" title="预览文章" :visible.sync="showArticlePrev" width="48%">
        <articles-preview :article-prev="articlePrev" />
      </el-dialog>

      <!-- 添加/编辑文章弹框 -->
      <el-dialog :title="isEdit?'编辑文章':'预览文章'" :visible="showEdit" width="50%" @close="retakeList">
        <articles-add v-if="showEdit" :is-edit="isEdit" :article-prev="articlePrev" @close="retakeList" />
      </el-dialog>

    </el-card>
  </div>
</template>

<script>
// 获取文章列表
import { list, changeState, remove } from '@/api/hmmm/articles'

// 引入视频播放插件
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'

// 导入组件
import articlesPreview from '../components/articles-preview'
import articlesAdd from '../components/articles-add.vue'

// 创建状态的枚举数据
const state = [
  {
    label: '已启用',
    value: 1
  },
  {
    label: '已禁用',
    value: 0
  }
]

export default {
  name: 'Articles',
  components: {
    articlesPreview,
    articlesAdd,
    videoPlayer
  },
  data() {
    return {
      keyword: '', // 键入的关键字
      articleForm: [], // 文章列表数组
      page: {
        pagesize: 10,
        page: 1
      },
      total: 0, // 数据项总数
      pagesizes: [10, 15, 25, 40], // 每页显示数据的总数
      states: state, // 状态
      selectedState: '', // 选择状态
      alertMsg: '', // 提示总数的信息
      showVideo: false, // 视频弹框的显示与否
      showArticlePrev: false, // 预览文章弹框的显示与否
      articlePrev: {}, // 预览的文章
      showEdit: false, // 添加/编辑 文章弹框显示与否
      isEdit: false, // 是否为编辑
      videoData: '', // 传给视频组件的当条数据
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false, // 如果为true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: 'video/mp4', // 类型
          src: '' // url地址
        }],
        poster: '', // 封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true // 是否显示全屏按钮
        }
      }

    }
  },
  computed: {
    // 视频样式
    videoStyle() {
      const style = []

      const display = { display: this.showVideo ? 'block' : 'none' }
      style.push(display)

      return style
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 每页总数显示改变时的事件
    handleSizeChange(val) {
      // 获取选择显示的数据总数 并 重新渲染表格
      this.page.pagesize = val
      this.getList()
    },

    // 页码改变时的事件
    handleCurrentChange(val) {
      // 获取选择的页面 并 重新渲染表格
      this.page.page = val
      this.getList()
    },

    // 获取列表数据
    async getList() {
      const res = await list(this.page)
      // 给列表渲染数据
      this.articleForm = res.data.items
      // 获取数据总数
      this.total = res.data.counts
      // 给提示信息添加总数
      this.alertMsg = `表格一共由${this.total}条数据`
    },

    // 对状态的状态码进行枚举数据筛选
    formatter(row, column, cellValue, index) {
      const res = state.find(item => item.value === Number(cellValue))

      return res ? res.label : '未知'
    },

    // 点击清除按钮 清除输入框内容
    async clear() {
      this.selectedState = ''
      this.keyword = ''

      const res = await list(this.page)
      this.articleForm = res.data.items
    },

    // 搜索按钮
    async search() {
      // 对输入框进行校验
      if (this.keyword && this.selectedState) {
        // 如果均有内容 判断当前表格数据 length是否等于 count
        if (this.articleForm.length !== this.total) {
          // 若不等于 证明数据不完整
          const query = { page: 1, pagesize: this.total }

          // 发请求 获取完整数据
          const res = await list(query)
          this.articleForm = res.data.items
        }

        // 先根据状态筛选
        const selState = this.articleForm.filter(item => item.state === this.selectedState)

        // 再根据关键字筛选
        const finalSelect = selState.filter(item => item.title.includes(this.keyword))

        // 判断当前页是否为第一页 跳转到第一页
        if (this.page.page !== 1) {
          this.page.page = 1
        }

        // 将筛选的结果赋值给表格数组
        this.articleForm = finalSelect
        // 同时 把筛选结果的长度 赋值给total
        this.total = this.articleForm.length
      } else {
        this.$message.error('输入框不能为空')
      }
    },

    // 视频弹框的地址
    videoUrl(id) {
      console.log(id)
    },

    // 点击预览
    preview(id) {
      this.showArticlePrev = true

      const res = this.articleForm.filter(item => item.id === Number(id))

      // 把筛选的数据 赋值给articleBody
      this.articlePrev = res[0]
    },

    // 切换文章状态（启用/禁用）
    async changeState(data) {
      const change = data.state === 1 ? 0 : 1

      // 去除数据中的state属性
      const { state, ...result } = data

      // 给剩余数据对象添加state属性 并赋值为新的状态
      result.state = change

      // 发送改变请求
      await changeState(result)

      this.getList()
    },

    // 新增文章
    addArticle() {
      this.showEdit = true
      this.isEdit = false
    },

    // 点击修改文章
    changeAritcle(data) {
      this.showEdit = true
      this.isEdit = true
      // const res = this.articleForm.filter(item => item.id === Number(id))
      // // 把筛选的数据 赋值给articleBody
      this.articlePrev = data
    },

    // 删除按钮
    async delArticle(id) {
      const resConfirm = await this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)

      // 若点击的是取消
      if (resConfirm === 'cancel') return this.$message.success('已取消删除文章')

      // 获取到当前行的文章
      const currentData = this.articleForm.filter(item => item.id === Number(id))

      // 调用删除方法
      const res = await remove(currentData[0])

      if (res.data.success) {
        this.$message.success('删除成功')

        this.getList()
      }
    },

    // 新增或者编辑 确认后
    retakeList() {
      this.showEdit = false
      this.getList()
    },

    // 视频播放
    videoPlay(data) {
      this.showVideo = true

      this.playerOptions.sources[0].src = data.videoURL
    }

  }
}
</script>

<style scoped lang='scss'>
.article-card {
  margin: 10px 6px;

  // 顶部搜索栏 字
  .top_span{
    font-size: 14px;
    font-weight: 700;
    margin-left: 17px;
    margin-right: 10px ;
  }
  //顶部输入框
  .input {
    width: 200px;
    height: 20px;
  }

  // 分页
  .page {
    margin: 10px 0;
  }

  // 表格中操作的按钮
  .scopelink {
    margin-left: 10px;
  }

  // 视频播放器
  // .demo {
  //   width: 100%;
  //   height: 100%;
  // }
  .el-dialog{
    border-radius: 10px;
    background: radial-gradient(rgba(0,0,0,0), transparent)!important;

    .el-dialog__header{
    position: relative;
    background: rgba(0,0,0,0);
    height: 2px;
    border-radius: 9px 9px 0 0;
    }
    .el-dialog__headerbtn {
    position: absolute;
    display: block;
    top: 0;
    right: 50%;
    padding: 0;
    background: 0 0;
    outline: 0;
    cursor: pointer;
    font-size: 64px;
    color: black;
    }

    .el-dialog__headerbtn .el-dialog__close,.el-dialog__headerbtn .el-dialog__close:hover{
      color: black;
    }

    .el-dialog__body {
    padding: 0;
     color: #606266;
    font-size: 14px;
    word-break: break-all;
    margin-top: 100px;

    }
  }

}
</style>
